/*
* Topic Page
**/

@use "sass:color";

// These styles are used both for topic page and linear topic page headers
.topic-page-header {
    background-color: $blue-10;
    color: $blue-90;
    margin-bottom: 40px;
    z-index: $zindex-extended-header;

    h1 {
        margin-bottom: 8px;
        margin-top: 40px;
        text-wrap: balance;
        @include sm-only {
            font-size: 2rem;
            margin-top: 16px;
        }
    }

    .topic-page-header__subtitle {
        margin: 0;
        line-height: 1.375rem;

        @include sm-only {
            font-size: 1rem;
        }
    }

    p.topic-page-header__byline {
        font-size: 0.875rem;
        margin-bottom: 0;
        color: $blue-60;
        @include sm-only {
            font-size: 0.875rem;
        }
    }
    .topic-page-header__byline a {
        @include owid-link-60;
        color: color.scale($blue-60, $lightness: -5%);
        &:visited {
            color: inherit;
        }
    }

    // Applies to either .topic-page-header__byline or .topic-page-header__dateline, if specified
    p:last-child {
        margin-bottom: 34px;
        @include sm-only {
            margin-bottom: 16px;
        }
    }

    + .sticky-nav {
        margin-top: -40px;
    }
}

.topic-page-header__cta-buttons {
    margin-top: 14px;
    margin-bottom: 32px;
    display: flex;
    gap: 16px;
    a {
        @include body-3-medium;
        color: $blue-60;
        &:hover {
            text-decoration: underline;
        }
    }
    svg {
        color: $blue-50;
        margin-right: 4px;
    }
}

.article-block__topic-page-intro {
    margin-top: 48px;

    @include sm-only {
        margin-top: 24px;
    }

    .topic-page-intro__content {
        p:first-child {
            margin-top: 0;
        }
        a {
            @include owid-link-90;
        }
    }

    .topic-page-intro__download-button {
        a {
            padding: 8px 24px;
            border: 1px solid $vermillion;
            color: $vermillion;
            display: inline-block;
            cursor: pointer;
            line-height: 30px;
            text-align: center;
        }

        &:hover {
            a {
                color: $accent-vermillion;
                border-color: $accent-vermillion;
            }
        }

        @include md-down {
            margin-top: 32px;
        }
    }

    .topic-page-intro__related-topics {
        border-left: 1px solid $blue-10;
        padding-left: 24px;
        margin-top: 48px;
        @include md-down {
            display: none;
        }

        @include related-topics;
    }
}

.article-block__key-insights {
    @include sm-only {
        h1 {
            font-size: 1.625rem;
        }
    }

    figure {
        margin: 0;
    }

    img {
        width: 100%;
    }

    .article-block__key-insights-content-column {
        max-height: 575px;
        overflow-y: auto;
        scrollbar-width: thin;
        @include md-up {
            padding-right: 16px;
        }

        @include sm-only {
            margin-bottom: 24px;
            .content > *:last-child {
                margin-bottom: 0;
            }
        }

        ul {
            margin-bottom: 32px;
            li {
                @include body-2-regular;
                margin-bottom: 8px;
            }
        }
    }

    .article-block__callout {
        h5 {
            text-align: center;
            letter-spacing: 10%;
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid $blue-20;
        }
    }
}

// small amount of extra padding to match figma designs which is 40px total for key-insights heading
.article-block__heading + .key-insights {
    margin-top: 8px;
}

.centered-article-container--topic-page .article-block__gray-section {
    > h1 {
        // Countering the gray-section padding to make this have 32px 16px
        margin-top: -16px;
        margin-bottom: 16px;

        // Special exception for the "Explore data on Blah" heading (which is a gdoc .article-block__heading)
        // so that it's left-aligned like the rest of the topic page component headings
        &[id^="explore"] {
            grid-column-start: 2;
        }
    }

    .article-block__text,
    .article-block__list,
    .article-block__html,
    .article-block__numbered-list {
        @include body-3-medium;
    }
}

// Collapse margins for "More about this data" heading below the explorer
.centered-article-container--topic-page
    .article-block__explorer
    + .article-block__sticky-right {
    margin-top: 0;

    .article-block__sticky-right-left-column h2:first-child {
        margin-top: 0;
    }

    // Override grid-margin-overrides for the prominent link below the explorer on the migration topic page.
    .article-block__prominent-link:first-child {
        margin-top: 32px !important;
    }
}

.centered-article-container--topic-page #article-citation h3 {
    text-align: left;
}

// Linear topic page customizations
// See also grid-margin-overrides.scss for linear topic pages margin overrides
.centered-article-container--linear-topic-page {
    .article-block__text,
    .article-block__list,
    .article-block__html,
    .article-block__numbered-list {
        @include body-2-regular;
    }

    .article-block__horizontal-rule
        + h1.article-block__heading.h1-semibold
        + .article-block__horizontal-rule {
        // h1's have a bottom margin of 24px, which stacked atop the hr's 48px, is too large.
        // this shrinks the second hr's margin-top so that it's 48px total, without affecting the
        // margins of any h1 that might come directly after it.
        margin-top: 24px;
    }

    // Shared styles for heading variant decorative pseudo-elements
    // At lg, heading takes up 6 columns, so 200% is 12 columns then we add a missing gutter
    // Using percentages instead of absolute values because different browsers calculate the grid size differently
    @mixin heading-variant-pseudo-widths {
        @include md-up {
            width: calc(200% + var(--grid-gap));
            left: calc(-50% - var(--grid-gap) / 2);
        }
        @include md-only {
            width: 120%;
            left: -10%;
        }
        @include sm-only {
            width: 100%;
            left: 0;
        }
    }

    @mixin heading-variant-base {
        text-wrap: unset;
        position: relative;
        @include sm-only {
            font-size: 1.5rem;
            line-height: 2rem;
        }
    }

    // Light variant: gray line above the heading
    &.centered-article-container--heading-variant-light {
        > h1.article-block__heading {
            @include heading-variant-base;
            margin-top: 96px;

            &::before {
                content: "";
                position: absolute;
                top: -48px;
                border-top: 1px solid $blue-10;
                @include heading-variant-pseudo-widths;
            }
        }

        // the LTP TOC is responsible for adding the spacing and divider line
        > .article-block__ltp-toc + h1.article-block__heading {
            margin-top: 0;
            &::before {
                display: none;
            }
        }
    }

    // Heavy variant: blue background behind the heading:
    // - on large screens, we use a pseudo-element to extend the blue background
    //   beyond the heading placement on the grid.
    // - on small screens, we use regular padding instead of a pseudo-element
    &.centered-article-container--heading-variant-heavy {
        --pseudo-element-padding: 24px;
        @include sm-only {
            --pseudo-element-padding: 0;
        }
        > h1.article-block__heading {
            @include heading-variant-base;
            margin-top: calc(80px + var(--pseudo-element-padding));
            margin-bottom: calc(40px + var(--pseudo-element-padding));

            &::before {
                content: "";
                position: absolute;
                top: calc(-1 * var(--pseudo-element-padding));
                bottom: -24px;
                background-color: $blue-5;
                z-index: -1;
                @include heading-variant-pseudo-widths;
            }

            // Use regular padding instead of pseudo-element on small screens
            @include sm-only {
                margin-top: 40px;
                margin-bottom: 24px;
                background-color: $blue-5;
                padding: 16px;

                &::before {
                    display: none;
                }
            }
        }

        // If preceeded by .article-block__ltp-toc, remove the margin on heavy
        // heading variant (the toc has its own bottom margin)
        > .article-block__ltp-toc + h1.article-block__heading {
            // honor the visual background added through the pseudo-element
            margin-top: var(--pseudo-element-padding);
            @include sm-only {
                margin-top: 0;
            }
        }
    }

    h2.article-block__heading {
        @include subtitle-1-bold;
        text-wrap: unset;
        @include sm-only {
            @include subtitle-2-bold;
        }
    }

    h3.article-block__heading {
        @include body-1-bold;
        text-wrap: unset;
        margin-top: 32px;
        margin-bottom: 16px;
    }

    .article-block__chart {
        margin-bottom: 32px;
    }
}
